<template>
  <div class="kpi-all">
    <div class="factory-kpi-list">
      <div class="search-header">
        <el-input v-model="searchInput" size="small" placeholder="输入搜索关键字" @keyup.13.native="onSearch">
          <i class="el-icon-close" slot="suffix" @click="clearSearch" v-if="searchInput.length"></i>
          <el-button slot="append" type="primary" icon="el-icon-search" @click="onSearch"></el-button>
        </el-input>
      </div>
      <el-collapse v-model="activeCollapse" accordion>
        <el-collapse-item v-for="(item, index) in groupList" :key="item.type" :name="item.type">
          <div slot="title" class="group-title">
            <i
              class="icon-toggle"
              :class="activeCollapse === item.type ? 'el-icon-caret-bottom' : 'el-icon-caret-right'"
            ></i>
            <span class="name">{{ item.title }}</span>
          </div>
          <div class="factory-list">
            <template v-if="item.page.results.length">
              <ul class="list-wrap">
                <li
                  class="list-item"
                  :class="{ 'is-active': tag.tagId === selectTag.tagId }"
                  v-for="tag in item.page.results"
                  :key="tag.tagId"
                  @click="selectItem(tag)"
                >
                  <icon-svg
                    :name="tag.tagType == 1 ? 'iconKpi' : tag.tagType == 2 ? 'iconSystem' : 'iconClock'"
                  ></icon-svg>
                  <span class="list-name elli">{{ tag.jsonConfig.tagNm }}</span>
                </li>
              </ul>
              <el-pagination
                style="text-align: right"
                :current-page="item.page.params.currentPageNum"
                :page-size="item.page.params.pageSize"
                background
                layout="total, prev, pager, next"
                :total="item.page.totalSize"
                :pager-count="5"
                small
                @current-change="handleCurrentChange($event, index)"
              >
              </el-pagination>
            </template>
            <div class="no-record" v-else>
              <img src="~@/assets/img/no_records.png" /><br />
              暂无内容
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div class="factory-kpi-wrapper">
      <div class="kpi-wrapper">
        <template v-if="selectTag.tagId">
          <kpi-header :tag="selectTag" @callback="getList"></kpi-header>
          <div class="kpi-content tag-scrollbar">
            <atom-index :tag="selectTag" v-if="selectTag.tagType == 1"></atom-index>
            <devired-index :tag="selectTag" v-if="selectTag.tagType == 2"></devired-index>
            <actual-index :tag="selectTag" v-if="selectTag.tagType == 3"></actual-index>
          </div>
        </template>
        <div class="no-select-record" v-else>
          <img src="~@/assets/img/no_records.png" /><br />
          暂无内容
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import kpiHeader from './components/kpi-header'
import atomIndex from './atom/atom-index'
import deviredIndex from './devired/devired-index'
import actualIndex from './actual/actual-index'
export default {
  components: {
    kpiHeader,
    atomIndex,
    deviredIndex,
    actualIndex
  },
  data() {
    return {
      loading: false,
      activeCollapse: -1,
      groupList: [
        {
          type: 1,
          title: '我发布的',
          page: {
            results: [],
            params: {
              ascs: [],
              descs: [],
              currentPageNum: 1,
              pageSize: 10,
              queryParams: {
                type: 1,
                isRelease: 1
              },
              descPriority: false
            },
            totalSize: 0
          }
        },
        {
          type: 2,
          title: '其他',
          page: {
            results: [],
            params: {
              ascs: [],
              descs: [],
              currentPageNum: 1,
              pageSize: 10,
              queryParams: {
                type: 2,
                isRelease: 1
              },
              descPriority: false
            },
            totalSize: 0
          }
        }
      ],
      searchInput: '',
      selectTag: {}
    }
  },
  watch: {
    activeCollapse() {
      this.getList()
    }
  },
  mounted() {
    this.$nextTick(() => (this.activeCollapse = 1))
  },
  methods: {
    getList() {
      this.$nextTick(() => {
        const typeItem = this.groupList.find(item => item.type === this.activeCollapse)
        const index = this.groupList.findIndex(item => item.type === this.activeCollapse)
        if (typeItem) {
          this.loading = true
          let params = typeItem.page.params
          params.queryParams.tagNm = this.searchInput.trim()
          this.$ajax({
            url: this.$ajax.setUrl('IndexAllocation/selectIndexSharePage'),
            method: 'get',
            params: this.$ajax.setParams(params)
          }).then(({ data }) => {
            if (data && data.code === '0') {
              this.groupList[index].page.results = data.data.records
              this.groupList[index].page.totalSize = data.data.totalSize
              let maxPageNum = Math.ceil(data.data.totalSize / typeItem.page.params.pageSize) || 1
              if (typeItem.page.params.currentPageNum > maxPageNum) {
                typeItem.page.params.currentPageNum = maxPageNum
                this.getList()
              }
              if (data.data.records.length && !this.selectTag.tagId) this.selectItem(data.data.records[0])
              else {
                this.loading = false
                if (this.selectTag.tagId) {
                  const target = this.groupList[index].page.results.find(item => item.tagId === this.selectTag.tagId)
                  if (target) this.selectTag = target
                }
              }
            } else {
              this.$message.error(data.data || data.msg)
            }
          })
        }
      })
    },
    reset() {
      this.groupList.forEach(item => {
        item.page.results = []
        item.page.params = {
          ascs: [],
          descs: [],
          currentPageNum: 1,
          pageSize: 10,
          queryParams: {
            type: item.type,
            isRelease: 1
          },
          descPriority: false
        }
        item.page.totalSize = 0
      })
    },
    onSearch() {
      this.reset()
      this.getList()
    },
    clearSearch() {
      this.searchInput = ''
      this.onSearch()
    },
    handleCurrentChange(num, index) {
      this.groupList[index].page.params.currentPageNum = num
      this.getList()
    },
    selectItem(item) {
      this.selectTag = item
    }
  }
}
</script>

<style lang="scss">
.kpi-all {
  height: 100%;
  .search-header {
    margin-bottom: 10px;
    padding: 1px 10px 0 10px !important;
    .el-input {
      width: 100% !important;
    }
    .el-input__suffix {
      top: 5px;
    }
    .el-input__suffix-inner {
      font-size: 18px;
      color: #4d82e9;
    }
  }
  .el-collapse-item__header {
    font-size: 16px;
    height: 45px;
    padding: 0 10px;
    line-height: 45px;
    &:hover {
      background-color: #efefef;
    }
  }
  .el-collapse-item__arrow {
    display: none;
  }
  .icon-toggle {
    font-size: 18px;
    color: #4d82e9;
  }
  .el-collapse-item__content {
    padding-bottom: 0;
  }
  .factory-kpi-list {
    width: 320px;
    padding: 0 0px 24px 36px;
    background-color: #f6f7f8;
    position: absolute;
    top: 0;
    left: 10px;
    bottom: 0;
    overflow: auto;
    box-shadow: 1px 1px 2px #ddd;
  }
  .search-header {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 8px;
    .el-input {
      width: 200px;
    }
    .el-input__suffix {
      top: 5px;
    }
    .el-input__suffix-inner {
      font-size: 18px;
      color: #4d82e9;
    }
  }
  .el-input-group__append {
    padding: 0 15px;
    color: #fff;
    background-color: #455fbc;
    border-color: #455fbc;
    i {
      font-size: 17px;
    }
  }
  .list-wrap {
    padding: 10px;
  }
  .list-item {
    padding: 10px;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    cursor: pointer;
    &:hover {
      color: #778cda;
      background-color: #efefef;
    }
    &.is-active {
      color: #778cda;
      background-color: #efefef;
    }
    .list-name {
      margin-left: 8px;
      flex: 1;
    }
    .list-creator,
    .list-time {
      margin-left: 6px;
      font-size: 12px;
      color: #8c8b8b;
    }
    svg {
      width: 18px;
      height: 18px;
    }
    .calcalute-svg {
      width: 16px;
      height: 16px;
    }
    .sql-svg {
      width: 20px;
      height: 20px;
    }
  }
  .factory-kpi-wrapper {
    height: 100%;
    padding-left: 350px;
    background-color: #fff;
    .kpi-wrapper {
      height: 100%;
    }
  }
  .factory-title {
    height: 50px;
    padding: 10px 0;
    h2 {
      color: #465fbc;
      padding-left: 15px;
      float: left;
      position: relative;
      &::before {
        width: 3px;
        content: '';
        background-color: #465fbc;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
      }
      svg {
        margin-right: 10px;
      }
    }
    .factory-handler {
      float: right;
      text-align: right;
      .el-button {
        font-size: 15px;
        color: #455fbc;
        background-color: transparent;
        border-color: transparent;
      }
      svg {
        width: 17px;
        height: 17px;
        margin-right: 3px;
        margin-top: -5px;
        vertical-align: middle;
      }
    }
  }
  .no-record {
    margin: 20px 0;
    text-align: center;
    img {
      margin-bottom: 10px;
    }
  }
  .no-select-record {
    padding: 20px 0;
    text-align: center;
    img {
      margin-bottom: 10px;
    }
  }
  .kpi-content {
    height: calc(100% - 50px);
    overflow-y: auto;
  }
}
</style>
